<!-- 不同的打印样式 -->
<template>
  <el-dialog width="50%" title="打印预览" v-model="dialogVisible" modal @close="closeDialog" :close-on-click-modal="false"
    :append-to-body="true">
    <span>
      <el-button type="primary" v-print="print">打印</el-button>
    </span>
    <div id="differentPrint" style="">
      <BackboneStyle v-show="showFlag === 'Backbone'" :title="BackboneFields" :data="data" />
      <CoverStyle v-show="showFlag === 'Cover'" :title="CoverFields" :data="data" />
      <CatalogStyle ref="CatalogStyle" v-show="showFlag === 'Catalog'" :title="catalogFields" :data="data" />
    </div>
  </el-dialog>
</template>

<script>
import BackboneStyle from '@/views/Setting/shelfDefine/BackboneStyle.vue'
import CoverStyle from '@/views/Setting/shelfDefine/CoverStyle.vue'
import CatalogStyle from '@/views/Setting/shelfDefine/CatalogStyle.vue'
import { queryBackSpineTemp, queryCoverTemp, queryCatalogueTemp } from '@/api/sys/template'

export default {
  name: 'differentPrint',
  components: { BackboneStyle, CoverStyle, CatalogStyle },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
      showFlag: '',
      BackboneFields: [],
      CoverFields: [],
      catalogFields: [],
      print: {
        id: 'differentPrint',
        // popTitle: '配置页眉标题', // 打印配置页上方的标题createInventoryCheck
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        openCallback() { }, // 调用打印时的callback
        closeCallback() {
          this.closeDialog()
        },
      },
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.data.forEach(() => {
      this.tableData.push([])
    })
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false
    },
    openDialog(type) {
      this.dialogVisible = true
      this.showFlag = type
      if (type === 'Backbone') {
        this.queryBackSpineTemp()
      } else if (type === 'Cover') {
        this.queryCoverTemp()
      } else if (type === 'Catalog') {
        this.queryCatalogueTemp()
        // this.$nextTick(() => {
        //   this.$refs.CatalogStyle.getParams()
        // })
      }
    },
    // 获取背脊模版的数据
    queryBackSpineTemp() {
      queryBackSpineTemp()
        .then((res) => {
          if (res.data.code == 200) {
            this.BackboneFields = res.data.data.fields
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 获取封面的模版
    queryCoverTemp() {
      queryCoverTemp()
        .then((res) => {
          if (res.data.code == 200) {
            this.CoverFields = res.data.data.fields
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 获取目录模版的数据
    queryCatalogueTemp() {
      queryCatalogueTemp()
        .then((res) => {
          if (res.data.code == 200) {
            this.catalogFields = res.data.data.fields
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>
<style lang="less" scoped></style>
